<template>
  <div id="hhh">


    <div id="hea">
      <div id="header" v-cloak>
        <div class="logo"></div>
        <div class="menu">
          <div class="menu-item " @click="toUrl('/')" :class="[nowPath == '/' ? 'active' : '']">首页</div>
          <div class="menu-item " @click="toUrl('/homenotice')" :class="[nowPath == '/homenotice' ? 'active' : '']">小区入住</div>
          <div class="menu-item" @click="toUrl('/becomedev')" :class="[nowPath == '/becomedev' ? 'active' : '']">代理加盟</div>
          <div class="menu-item" @click="toUrl('/about')" :class="[nowPath == '/about' ? 'active' : '']">关于我们</div>
          <div class="menu-item" @click="toUrl('/homeupdatelog')" :class="[nowPath == '/homeupdatelog' ? 'active' : '']">联系我们</div>
        </div>
      </div>
    </div>
    <div>
      <img style="width: 100%;height: 618px;" src="../../assets/images/top-back.png"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Navv',

    data() {
      return {
        nowPath: '/'
      }
    },



    created() {},

    methods: {

      toUrl(url) {
        // this.$router.push({
        //   path: url
        // })
        this.nowPath = url;
      },
      openPage(page) {
        window.location.href = '/' + page;
      },
      pageChange() {
        if (window.location.pathname === '/channel-cooperation' && window.location.hash === '#contact-us') {
          this.nowPath = '/contact-us';
        } else {
          this.nowPath = window.location.pathname;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 横向全部显示，可能部分纵向不显示完整 */

  #hhh {
    width: 100%;
    z-index: 999;
    // height: 618px;
    // background: url("../../assets/images/top-back.png");
    background-repeat: no-repeat;
    /* 背景不重复显示 */
    background-size: cover;
    /* 横向全部显示，可能部分纵向不显示完整 */
  }

  #hea {
    background: #ffffff;
    width: 100%;


    #header {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      height: 116px;
      max-width: 1500px;
      margin: auto;

      .logo {
        width: 188px;
        height: 60px;
        background: url("../../assets/images/logo2.png") no-repeat center center;
        background-size: cover;
      }

      .menu {
        display: flex;
        align-items: center;
        margin-left: 80px;

        .menu-item {
          flex-shrink: 0;
          margin-right: 50px;
          color: #666666;
          cursor: pointer;
          font-size: 20px;

          &:hover,
          &.active {
            color: #000000;
            font-size: 20px;
            font-weight: 800;

          }
        }
      }
    }
  }

  .active {
    color: #FF7C59;
  }

  .top-back {
    width: 100%;
    height: 782px;

    background: url("../../assets/images/top-back.png");
    background-repeat: no-repeat;
    /* 背景不重复显示 */
    background-size: cover;
    /* 横向全部显示，可能部分纵向不显示完整 */
    opacity: 1 !important;
    margin-top: -60px;
    z-index: -1;
  }



  main {
    width: 100%;
    min-height: calc(100vh - 332px);
  }
</style>
